import L from "leaflet";
import pinia from '@/store/pinia';
import { useMapStore } from "@/store/map";
import { begin, end } from "@/assets/img.js";

const mapStore = useMapStore(pinia);

const setPolyLine = (map, points) => {
  if (points.length === 0) {
    alert("无运动轨迹");
    return;
  }

  // 清除所有定时器
  clearTimeout(mapStore.timer);

  // 清除所有的图层
  const allLayers = map._layers; // 注意：_layers是一个内部属性，可能在未来版本中改变

  // 遍历所有图层，并检查它们是否是L.layerGroup的实例
  for (const layerId in allLayers) {
    const layer = allLayers[layerId];

    // 检查图层是否是L.layerGroup的实例
    if (layer instanceof L.LayerGroup) {
      // 如果是，则从地图上移除它
      map.removeLayer(layer);
    }

    // 注意：对于嵌套的layerGroup（即layerGroup中包含其他layerGroup），
    // 你可能需要递归地处理它们，但上面的代码只处理了一级layerGroup。
  }

  const layerGroup = L.layerGroup().addTo(map);

  L.marker(points[0], {
    icon: L.icon({
      iconUrl: begin, // 图标图片的URL
      iconSize: [32, 32], // 图标的大小
      iconAnchor: [15, 15], // 图标的锚点，即图标的位置应该放置在地图上的位置
      popupAnchor: [-3, -76] // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
    })
  }).addTo(layerGroup);

  L.polyline
    .antPath(points, {
      color: "#006600",
      fillColor: "#006600",
      pulseColor: "#e5ffe5",
      opacity: 6,
      delay: 10000,
      dashArray: [5, 30]
    })
    .addTo(layerGroup);

  L.marker(points[points.length - 1], {
    icon: L.icon({
      iconUrl: end, // 图标图片的URL
      iconSize: [32, 32], // 图标的大小
      iconAnchor: [15, 15], // 图标的锚点，即图标的位置应该放置在地图上的位置
      popupAnchor: [-3, -76] // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
    })
  }).addTo(layerGroup);
}

export default setPolyLine;